<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style>
.package-status{padding:18px 0 0 0}
.package-status .status-list{margin:0;padding:0;margin-top:-5px;padding-left:8px;list-style:none;}
.package-status .status-list li{border-left:2px solid #d9d9d9;text-align:left;}
.package-status .status-list li:before{ /* 流程点的样式 */
	content:'';
	border:3px solid #f3f3f3;
	background-color:#d9d9d9;
	display:inline-block;
	width:10px;
	height:10px;
	border-radius:10px;
	margin-left:-9px;
	margin-right:10px
}
.package-status .status-list .latest:before{background-color:#0dad12;border-color:#f8e9e4;}
.package-status .status-box{overflow:hidden}
.package-status .status-list li{height:auto;}
.package-status .status-list{margin-top:-8px}
.package-status .status-box{position:relative}
.package-status .status-box:before{content:" ";background-color:#f3f3f3;display:block;position:absolute;top:-8px;left:20px;width:10px;height:4px}
.package-status .status-list{margin-top:0px;}
/* .package-status .status-list .latest{border:none} */
/* .package-status .status-list li{margin-bottom:-2px} */
 
 
 
.status-list li:not(:first-child){
	padding-top:10px;
}
 
.status-content-before{
	text-align:left;
	margin-left:25px;
	margin-top:-20px;
}
.status-content-latest{
	text-align:left;
	margin-left:25px;
	color:green;
	margin-top:-20px;
}
.status-time-before{qqqqqqqqq
	text-align:left;
	margin-left:25px;
	font-size:10px;
	margin-top:5px;
	
}
.status-time-latest{
	text-align:left;
	margin-left:25px;
	color:green;
	font-size:10px;
	margin-top:5px;
}
.status-line{
	border-bottom:1px solid #ccc;
	margin-left:25px;
	margin-top:10px;
	
}
</style>
<body>
	<h1 id="h1" style="text-align:center"></h1>
	<input type="hidden" id="id" th:value="${id}">
	<div class="package-status">
			<div class="status-box" >
				<ul class="status-list">
				</ul>
			</div>
	</div>
	<div th:include="include::footer"></div>
</body>
<script type="text/javascript">
	$(function(){
		$.ajax({
			type : 'GET',
			url : '/shop/ohOrder/checkLogist/'+$("#id").val(),
			success : function(data) {
				if(typeof data.data.data=="undefined"){
					$("#h1").text("非常抱歉，暂无物流信息");
				}else{
					var resoult = data.data.data;
					$.each(resoult,function(index,element){
						if(index==0){
							var trHtml = 
				        		"<li class='latest'>" +
				        			"<div class='status-content-before'>" +
				        				element.context +
				        			"</div>" + 
				        			"<div class='status-time-before'>" +
				        				element.time +
				        			"</div>" +
				        			"<div class='status-line'>" +
			        				"</div>" +
				        		"</li>";
							$(".status-list").append(trHtml);
						}else{
							var trHtml = 
				        		"<li>" +
				        			"<div class='status-content-before'>" +
				        				element.context +
				        			"</div>" + 
				        			"<div class='status-time-before'>" +
				        				element.time +
				        			"</div>" +
				        			"<div class='status-line'>" +
			        				"</div>" +
				        		"</li>";
							$(".status-list").append(trHtml);
						}
						
					});
				}
				
			}
		});
	})
</script>
</html>
